<template>
	<view class="input-title">银行卡号</view>
	<view class="input-box">
		<view>
			<view>银行卡号</view>
			<up-input
				placeholder="请输入银行卡号"
				border="none"
				type="number"
				v-model="card_no"></up-input>
		</view>
	</view>
	<view class="input-title">开户行信息</view>
	<view class="input-box">
		<view @click="show = true">
			<view>银行名称</view>
			<up-input
				placeholder="请输入银行名称"
				border="none"
				readonly
				v-model="bank_name"></up-input>
		</view>
		<view>
			<view>持卡人</view>
			<up-input
				placeholder="请输入银行开户姓名"
				border="none"
				v-model="name"></up-input>
		</view>
		<view>
			<view>开户行</view>
			<up-input
				placeholder="请输入开户行信息"
				border="none"
				v-model="bank_kai"></up-input>
		</view>
	</view>
	<up-picker :show="show" :columns="columns" @cancel="show = false" @confirm="confirm"></up-picker>
	<view class="privacy">
		<radio :checked="current" @click="current = !current" style="transform:scale(0.7)" color="#F6941D " />
		<text @click="privacyContract">我已经详细阅读《 星颉赛孚能源用户协议 》</text>
	</view>
	<view class="btn" @click="submit">立即添加</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';
	import api from '../../api/api';
	import { useCounterStore } from '../../stores/user';
	import { storeToRefs } from 'pinia'
	const user = useCounterStore()
	const { userinfo } = storeToRefs(user)

	onLoad(() => {
		banks()
	})

	function banks() {
		api.user.banks()
			.then(res => {
				columns[0] = res.data.map(x => x.bank_title)
				Object.assign(columnsLod, res.data)
			})
	}


	const show = ref(false);
	const columnsLod = reactive([])
	const columns = reactive([
		[]
	]);

	function confirm(e) {
		console.log(e)
		bank_id.value = columnsLod[e.indexs[0]].bank_id
		bank_name.value = columnsLod[e.indexs[0]].bank_title
		show.value = false
	}

	const bank_id = ref('')
	const bank_name = ref('')
	const name = ref('')
	const card_no = ref('')
	const bank_kai = ref('')

	function submit() {
		if (!current.value) return uni.$showMsg("请阅读用户协议")
		if (!CheckBankNo(card_no.value)) {
			return uni.$showMsg('请输入正确的银行卡号!')
		}
		if (!name.value) return uni.$showMsg("请输入姓名")
		if (!bank_id.value) return uni.$showMsg("请您选择银行卡")
		if (!bank_kai.value) return uni.$showMsg("请输入开户行地址")
		api.user.add_user_bank({
			bank_id: bank_id.value, //请选择银行
			user_id: userinfo.value.user_id,
			name: name.value,
			card_no: card_no.value,
			bank_kai: bank_kai.value
		}).then(res => {
			uni.$showMsg("添加成功")
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		})
	}
	const current = ref(false)

	function privacyContract() {
		wx.openPrivacyContract({
			success: () => {}, // 打开成功
			fail: () => {}, // 打开失败
			complete: () => {}
		})
	}

	function luhnCheck(bankno) {
		var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位（与luhn进行比较）

		var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位
		var newArr = new Array();
		for (var i = first15Num.length - 1; i > -1; i--) { //前15或18位倒序存进数组
			newArr.push(first15Num.substr(i, 1));
		}
		var arrJiShu = new Array(); //奇数位*2的积 <9
		var arrJiShu2 = new Array(); //奇数位*2的积 >9

		var arrOuShu = new Array(); //偶数位数组
		for (var j = 0; j < newArr.length; j++) {
			if ((j + 1) % 2 == 1) { //奇数位
				if (parseInt(newArr[j]) * 2 < 9)
					arrJiShu.push(parseInt(newArr[j]) * 2);
				else
					arrJiShu2.push(parseInt(newArr[j]) * 2);
			} else //偶数位
				arrOuShu.push(newArr[j]);
		}

		var jishu_child1 = new Array(); //奇数位*2 >9 的分割之后的数组个位数
		var jishu_child2 = new Array(); //奇数位*2 >9 的分割之后的数组十位数
		for (var h = 0; h < arrJiShu2.length; h++) {
			jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
			jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
		}

		var sumJiShu = 0; //奇数位*2 < 9 的数组之和
		var sumOuShu = 0; //偶数位数组之和
		var sumJiShuChild1 = 0; //奇数位*2 >9 的分割之后的数组个位数之和
		var sumJiShuChild2 = 0; //奇数位*2 >9 的分割之后的数组十位数之和
		var sumTotal = 0;
		for (var m = 0; m < arrJiShu.length; m++) {
			sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
		}

		for (var n = 0; n < arrOuShu.length; n++) {
			sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
		}

		for (var p = 0; p < jishu_child1.length; p++) {
			sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
			sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
		}
		//计算总和
		sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(
			sumJiShuChild2);

		//计算luhn值
		var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
		var luhn = 10 - k;

		if (lastNum == luhn) {
			console.log("验证通过");
			return true;
		} else {
			// layer.msg("银行卡号必须符合luhn校验");
			return false;
		}
	}
	//检查银行卡号
	function CheckBankNo(bankno) {
		var bankno = bankno.replace(/\s/g, '');
		if (bankno == "") {
			uni.$showMsg("请填写银行卡号");
			return false;
		}
		if (bankno.length < 16 || bankno.length > 19) {
			uni.$showMsg("银行卡号长度必须在16到19之间");
			return false;
		}
		var num = /^\d*$/; //全数字
		if (!num.exec(bankno)) {
			uni.$showMsg("银行卡号必须全为数字");
			return false;
		}
		//开头6位
		var strBin =
			"10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
		if (strBin.indexOf(bankno.substring(0, 2)) == -1) {
			uni.$showMsg("银行卡号开头6位不符合规范");
			return false;
		}
		//Luhn校验
		if (!luhnCheck(bankno)) {
			return false;
		}
		return true;
	}
</script>

<style lang="scss">
	.input-title {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		padding: 32rpx;
	}

	.input-box {
		padding: 0 64rpx;

		>view {
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F0F0F0;
			height: 100rpx;

			>view {
				width: 120rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				margin-right: 52rpx;
			}
		}
	}

	.privacy {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 189rpx;
		left: 0;
		width: 100vw;

		>text {
			margin-left: 10rpx;
			font-size: 24rpx;
		}
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F6941D;
		border-radius: 12rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		bottom: 50rpx;
		left: 32rpx;
	}
</style>